<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="controler.formbeans.AdminBean"%>
<%@include file="parts/Header.jsp" %>
<%--
    Document   : About Us
    Created on : 16/08/2011, 11:47:35 ص
    Author     : Ahmed
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Services</title>

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>


        <style>
            body { font-size: 62.5%; }
            label, input { display:block; }
            input.text { margin-bottom:12px; width:95%; padding: .4em; }
            fieldset { padding:0; border:0; margin-top:25px; }
            h1 { font-size: 1.2em; margin: .6em 0; }
            div#users-contain { width: 350px; margin: 20px 0; }
            div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
            div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
            .ui-dialog .ui-state-error { padding: .3em; }
            .validateTips { border: 1px solid transparent; padding: 0.3em; }
        </style>

        <script src="styles/html/ckeditor.js"></script>
        <link href="styles/html/sample.css" rel="stylesheet">
        <script>

            // The instanceReady event is fired, when an instance of CKEditor has finished
            // its initialization.
            CKEDITOR.on( 'instanceReady', function( ev ) {
                // Show the editor name and description in the browser status bar.
                document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';

                // Show this sample buttons.
                document.getElementById( 'eButtons' ).style.display = 'block';
            });

            function InsertHTML() {
                // Get the editor instance that we want to interact with.
                var editor = CKEDITOR.instances.editor1;
                var value = document.getElementById( 'htmlArea' ).value;

                // Check the active editing mode.
                if ( editor.mode == 'wysiwyg' )
                {
                    // Insert HTML code.
                    // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
                    editor.insertHtml( value );
                }
                else
                    alert( 'You must be in WYSIWYG mode!' );
            }

            function InsertText() {
                // Get the editor instance that we want to interact with.
                var editor = CKEDITOR.instances.editor1;
                var value = document.getElementById( 'txtArea' ).value;

                // Check the active editing mode.
                if ( editor.mode == 'wysiwyg' )
                {
                    // Insert as plain text.
                    // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText
                    editor.insertText( value );
                }
                else
                    alert( 'You must be in WYSIWYG mode!' );
            }

            function SetContents() {
                // Get the editor instance that we want to interact with.
                var editor = CKEDITOR.instances.editor1;
                var value = document.getElementById( 'htmlArea' ).value;

                // Set editor contents (replace current contents).
                // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
                editor.setData( value );
            }

            function GetContents() {
                // Get the editor instance that you want to interact with.
                var editor = CKEDITOR.instances.editor1;

                // Get editor contents
                // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData
                alert( editor.getData() );
            }

            function ExecuteCommand( commandName ) {
                // Get the editor instance that we want to interact with.
                var editor = CKEDITOR.instances.editor1;

                // Check the active editing mode.
                if ( editor.mode == 'wysiwyg' )
                {
                    // Execute the command.
                    // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand
                    editor.execCommand( commandName );
                }
                else
                    alert( 'You must be in WYSIWYG mode!' );
            }

            function CheckDirty() {
                // Get the editor instance that we want to interact with.
                var editor = CKEDITOR.instances.editor1;
                // Checks whether the current editor contents present changes when compared
                // to the contents loaded into the editor at startup
                // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty
                alert( editor.checkDirty() );
            }

            function ResetDirty() {
                // Get the editor instance that we want to interact with.
                var editor = CKEDITOR.instances.editor1;
                // Resets the "dirty state" of the editor (see CheckDirty())
                // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty
                editor.resetDirty();
                alert( 'The "IsDirty" status has been reset' );
            }

            function Focus() {
                CKEDITOR.instances.editor1.focus();
            }

            function onFocus() {
                document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';
            }

            function onBlur() {
                document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';
            }

        </script>





    </head>
    <body onload="resizePage()">
        <center>
            <div id="innerPageContainer" >
                <table style="width: 100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>

                        <td rowspan="3" id="innerPageCell" >



                            <html:form action="/admin?actionType=updateService" enctype="multipart/form-data">
                                <logic:iterate id="msg" property="services" name="AdminBean">
                                    <div id="users-contain" class="ui-widget">

                                        <table id="users" class="ui-widget ui-widget-content">
                                            <thead>
                                                <tr class="ui-widget-header ">
                                                    <th>Service ID</th>
                                                    <th>Service name</th>
                                                    <th>Service Short Description</th>
                                                    <th>ShowMenu</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                <tr>
                                                    <html:hidden  value="${msg.serviceId}" property="serviceId"/>
                                                    <td><bean:write name="msg" property="serviceId"/></td>
                                                    <td><html:text value="${msg.serviceName}" property="serviceName"/></td>
                                                    <td><html:text value="${msg.serviceShortDescription}" property="serviceShortDescription"/></td>
                                                    <td>
                                                        <html:select property="showMenu" value="${msg.showMenu}">
                                                            <html:option value="yes">Yes</html:option>
                                                            <html:option value="no">No</html:option>
                                                        </html:select>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                    <table>
                                        <tr> <td>Service Image</td>
                                            <td><html:hidden property="hiddenServiceImage" value="${msg.serviceImage}"/>
                                                <html:file property="serviceImg" value="${msg.serviceImage}"/></td>
                                            <td><img src="${msg.serviceImage}" width="70" height="70"/></td>
                                        </tr>
                                        <tr> <td>Service Icon</td><td><html:hidden property="hiddenServiceLogo" value="${msg.serviceLogo}"/><html:file property="serviceLog" value="${msg.serviceLogo}"/></td><td><img src="${msg.serviceLogo}" width="70" height="70"/></td></tr>

                                        <td>Description</td>
                                        <td>
                                            <html:textarea cols="100" styleId="a2"  rows="10" property="serviceDescription" value="${msg.serviceDescription}"/>
                                            <script>
                                                // Replace the <textarea id="editor1"> with an CKEditor instance.
                                                CKEDITOR.replace( 'a2', {
                                                    on: {
                                                                            
                                                        focus: onFocus,
                                                        blur: onBlur,

                                                        // Check for availability of corresponding plugins.
                                                        pluginsLoaded: function( evt ) {
                                                            var doc = CKEDITOR.document, ed = evt.editor;
                                                            if ( !ed.getCommand( 'bold' ) )
                                                                doc.getById( 'exec-bold' ).hide();
                                                            if ( !ed.getCommand( 'link' ) )
                                                                doc.getById( 'exec-link' ).hide();
                                                        }
                                                    }
                                                });
                                                                   
                                            </script>
                                        </td>
                                    </table>           


                                </logic:iterate>
                                <html:submit value="Modify"/>
                            </html:form>

                        </td>
                    </tr>

                    <tr>

                        <td>

                        </td>
                    </tr>

                    <tr>

                    </tr>

                    <tr>
                        <td colspan="2" class="footer">
                            <jsp:include page="parts/Footer.jsp"/>
                        </td>
                    </tr>
                </table>

            </div>





        </center>
    </body>
</html>

